import 'package:car_map/page/res/gaps.dart';
import 'package:car_map/page/res/styles.dart';
import 'package:car_map/page/routers/fluro_navigator.dart';
import 'package:car_map/page/squarepage/attractions_page/ticket_sort_widget.dart';
import 'package:car_map/widget/load_image.dart';
import 'package:car_map/widget/widget_progressbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'lableItem_widget.dart';

///旅游景点详情
class AttractionsDatailsPage extends StatefulWidget {
  @override
  attractionsDatailsState createState() => attractionsDatailsState();
}

class attractionsDatailsState extends State<AttractionsDatailsPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            height: ScreenUtil().setHeight(700.0),
            child: Stack(
              children: <Widget>[
                Container(
                  width: ScreenUtil().setWidth(750),
                  height: ScreenUtil().setHeight(700.0),
                  child: LoadImage(
                    'https://img.alicdn.com/bao/uploaded/i4/3879654134/O1CN01tvhsPp1gPPtSA5DKu_!!3879654134.jpg_400x400.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  child: introductionWidget(),
                  top: ScreenUtil().setHeight(550.0),
                ),
                Positioned(
                    top: ScreenUtil().setHeight(15.0),
                    left: ScreenUtil().setWidth(15.0),
                    child: Container(
                      padding: EdgeInsets.all(10.0),
                      child: InkWell(
                        onTap: () {
                          NavigatorUtils.goBack(context);
                        },
                        child: Icon(
                          Icons.arrow_back,
                          color: Colors.black54,
                          size: 25.0,
                        ),
                      ),
                    ))
              ],
            ),
          ),
          Gaps.vGap10,
          itemWidget(title: '爬塔看风景，尤其是起风后，塔上的风铃特别好听。', context: '106条点评'),
          itemWidget(title: '开放时间:3月1日-10月31日08:00-18:30', context: '详情'),
          itemWidget(title: '西安市雁塔区雁塔南路附近', context: '地图'),
          itemWidget(
              title: '西安景点完了人气榜第7名',
              context: '榜单',bgColors: Colors.orange[50],txColor: Colors.orange[900],isIcon: false),
          Gaps.vGap10,
          itemTitle(title: '门票'),
          TickSortWidget(),
          Gaps.vGap10,
          itemTitle(title: '精选一日游'),

          Gaps.vGap10,
          itemTitle(title: '景区内体验'),

          Gaps.vGap10,
          itemTitle(title: '大家的点评'),
        ],
      ),
    );
  }

  //景点介绍
  Widget introductionWidget() {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0),
      width: ScreenUtil().setWidth(750.0),
      height: ScreenUtil().setHeight(150.0),
      margin: EdgeInsets.only(top: 10.0),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0))),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                '大雁塔',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold),
              ),
              Row(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(4.0),
                    decoration: BoxDecoration(
                        color: Colors.yellow,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10.0),
                            bottomLeft: Radius.circular(10.0),
                            topRight: Radius.circular(10.0))),
                    child: Text(
                      '热门',
                      style: TextStyle(fontSize: ScreenUtil().setSp(16.0)),
                    ),
                  ),
                  Gaps.hGap10,
                  Text(
                    '4.4分',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold),
                  )
                ],
              )
            ],
          ),
          Gaps.vGap8,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(
                        left: 5.0, right: 5.0, top: 3.0, bottom: 3.0),
                    decoration: BoxDecoration(
                        color: Colors.greenAccent[100],
                        borderRadius: BorderRadius.all(Radius.circular(5.0))),
                    child: Text(
                      '5A',
                      style: TextStyle(
                          color: Colors.green, fontWeight: FontWeight.bold),
                    ),
                  ),
                  Gaps.hGap8,
                  Container(
                    width: ScreenUtil().setWidth(350.0),
                    child: LableItemWidget(),
                  ),
                ],
              ),
              WidgetProgressBar(
                width: 120.0,
                height: 30.0,
                indexBar: 3,
                maxLenth: 5,
                colorsType: Colors.yellow,
              ),
            ],
          ),
        ],
      ),
    );
  }
  //景区描述
  Widget itemWidget({String title, String context,Color bgColors,Color txColor,bool isIcon}) {
    return Container(
      color: bgColors??=Colors.white,
      padding: EdgeInsets.only(left: 10.0, right: 10.0),
      height: ScreenUtil().setHeight(55.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
         Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
         Offstage(
           offstage: isIcon??=true,
           child: LoadAssetImage('square/ic_prize',width: ScreenUtil().setWidth(30.0),height: ScreenUtil().setHeight(30.0),),
         ),
             Text(
               '${title}',
               style: TextStyle(fontSize: ScreenUtil().setSp(20.0),color: txColor??=Colors.black),
             ),
           ],
         ),
          Row(
            children: <Widget>[
              Text('${context}',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(20.0), color: Colors.blue)),
              Icon(
                Icons.navigate_next,
                color: Colors.blue,
              )
            ],
          )
        ],
      ),
    );
  }

  //门票
  Widget itemTitle({var title}){

    return Container(
      color: Colors.white,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 10.0, right: 10.0),
      height: ScreenUtil().setHeight(60.0),
      child: Text(
        '${title}',
        style: TextStyle(
            color: Colors.black,
            fontSize: 14.0,
            fontWeight: FontWeight.bold),
      ),
    );
  }
}
